<template>
  <h1>Icon 图标</h1>
  <Captions title="基础用法">
    直接设置 <span class="mark-span">name</span>属性即可
  </Captions>
  <Demo :component="Icon1"></Demo>
  <ul style="max-width: 900px;
    margin: 0px auto;">
    <li v-for="i in list">
      <div>
        <lc-icon class="lc-icon" :name="i"></lc-icon>
      </div>
      <div class="content">{{ i }}</div>
    </li>
  </ul>
</template>

<script lang="ts">
  import Captions from '../Captions.vue'
  import LcIcon from '../../lib/icon.vue'
  import Icon1 from './Icon1.vue'
  import Demo from '../Demo.vue'
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    name: "IconDemo",
    components: {
      LcIcon, Demo,Captions
    },
    setup(){
      const list = ref([
       'lc-icon-checkbox','lc-icon-biyan','lc-icon-bianji', 'lc-icon-anquan','lc-icon-gengduo','lc-icon-gou','lc-icon-gouxuan', 'lc-icon-guanbi','lc-icon-gouwuche','lc-icon-jia','lc-icon-jianshao','lc-icon-jingshi','lc-icon-jingyin','lc-icon-kejian','lc-icon-rili','lc-icon-qiehuan','lc-icon-rizhi','lc-icon-sousuo','lc-icon-shangchuan1','lc-icon-tongzhi','lc-icon-wode','lc-icon-yiwen','lc-icon-gouxuan_mian','lc-icon-jian_mian','lc-icon-jingshi_mian','lc-icon-kejian_mian','lc-icon-shanchu_mian','lc-icon-wode_mian','lc-icon-hanhan-01-01','lc-icon-hanhan-01-011','lc-icon-hanhan-01-012','lc-icon-hanhan-01-013','lc-icon-dianzan','lc-icon-lishi','lc-icon-shanchu','lc-icon-shoucang','lc-icon-arrow-down','lc-icon-arrow-down','lc-icon-arrow-left','lc-icon-plus','lc-icon-setup','lc-icon-icon_loading'
      ])
      return {
        list, Icon1
      }
    }
  })
</script>

<style lang="scss" scoped>
  @keyframes spin{
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }

  .lc-icon-icon_loading{
    animation: spin 3s linear infinite;
    color:red;
  }
  ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    &>li{
      height: 120px;
      width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #e3e3e3;
      border-top: 1px solid #e3e3e3;
      border-right: 1px solid #e3e3e3;
      border-bottom: 1px solid #e3e3e3;
      margin-right: -1px;
      margin-bottom: -1px;
      padding: 5px;
      cursor: default;
      transition: .2s 50ms;
      text-align: center;
      .lc-icon {
        font-size: 32px;
        margin-bottom: 15px;
        color: #606266;
        transition: color .15s linear;
      }
      .content {
        line-height: normal;
        color: #99a9bf;
        transition: color .15s linear;
      }
    }
  }
</style>
